<template>
  <!-- 

# 对 v-model 的组件 如何二次封装

- 不要 用 watch

- vue3 把 v-model 拆分成 update:modelValue modelValue

-->

  <el-drawer
    :model-value="modelValue"
    :direction="direction"
    :title="title"
    @close="handleClose"
  >
    <slot />
  </el-drawer>
</template>

<script lang="ts" setup>
import type { DrawerProps } from "element-plus"
import { PropType } from "vue"
defineProps({
  // 1. 控制抽屉组件
  modelValue: {
    type: Boolean,
    default: false
  },
  // 2. 抽屉组件方向
  direction: {
    type: String as PropType<DrawerProps["direction"]>,
    default: "rtl"
  },
  // 3. 标题
  title: {
    type: String,
    default: ""
  }
})
// 4. 不做参数校验，数组写法
const emit = defineEmits(["update:modelValue"])
// 5. 关闭抽屉组件
const handleClose = () => {
  emit("update:modelValue", false)
}
</script>
